<template>
  <div class="ProductDetail">
    <!-- 导航栏 -->
    <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="onClickLeft" />
    <!-- 商品背景 -->
    <div class="imgBox">
      <img class="product_img" :src="productData.large_img" alt />
    </div>
    <!-- 商品详情 -->
    <div class="detail">
      <div class="layout name">
        <div>{{productData.name}}</div>
        <div>￥{{productData.price}}</div>
      </div>
      <div class="enname">{{productData.enname}}</div>
      <div class="temperatrue choose" v-for="(item,index) in ruleType" :key="index">
        <van-field name="radio" :label="item[0]">
          <template #input>
            <van-radio-group
              class="custom-radio-group"
              :key="index"
              v-model="radio[index]"
              @change="setRule"
            >
              <van-row gutter="10">
                <van-col span="6" v-for="(item,index) in item[1]" :key="index+3">
                  <van-radio :name="item">{{item}}</van-radio>
                </van-col>
              </van-row>
            </van-radio-group>
          </template>
        </van-field>
      </div>
      <div class="divider" />
      <div class="layout count">
        <div>选择数量</div>
        <van-stepper theme="round" button-size="22" disable-input class="stepper" v-model="count"/>
      </div>
      <div class="divider" />
      <div class="desc">商品描述</div>
      <div class="desc_content" v-for="(item,index) in desc" :key="index+5">{{index+1}}、{{item}}</div>
    </div>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon color="#0c34ba" :badge="shopbagCount" icon="bag" text="购物袋" />
      <van-goods-action-icon icon="like" :text="like?'已收藏':'未收藏'" :color="like?'#0c34ba':''" @click="changeLike" />
      <van-goods-action-button color="#6a91ec" text="加入购物袋" @click="addShopbag" />
      <van-goods-action-button color="#0c34ba" text="立即购买" @click="purchase"/>
    </van-goods-action>
  </div>
</template>
<script>
export default {
  name: "ProductDetail",
  data() {
    return {
      pid: "",
      productData: "",
      show: true,
      shopbagCount: "",
      radio: [],
      desc: "",
      ruleType: [],
      like: false,
      count:""
    };
  },
  //生命周期
  created() {
    this.pid = this.$route.query.id;
    this.getShopbagRows();
    this.getProductData();
    this.queryCollectionByPid();
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    getProductData() {
      this.axios({
        //请求类型
        method: "GET",
        //请求地址
        url: "/productDetail",
        params: {
          appkey: this.appkey,
          pid: this.pid
        }
      }).then(res => {
        this.productData = res.data.result[0];
        this.getRuleString();
        // console.log(dataMap);
        this.desc = this.productData.desc.split("\n");
      });
    },
    getRuleString() {
      let ruleEnName = ["cream", "milk", "sugar", "tem"];
      let ruleType = [];
      let ruleMap = new Map();
      for (let i = 0; i < ruleEnName.length; i++) {
        if (this.productData[ruleEnName[i]] != "") {
          ruleType.push([ruleEnName[i]]);
        }
      }
      if(ruleType.length==0)   {
      console.log("ruleType");
      this.$router.push("login");}
      for (let j = 0; j < ruleType.length; j++) {
        let rules = this.productData[ruleType[j]].split("/");
        ruleMap.set(this.productData[ruleType[j] + "_desc"], rules);
        this.ruleType = ruleMap;
        //设置默认值
        this.radio[j] = rules[0];
      }
      this.setRule();
      // console.log(this.radio);
      // console.log(this.ruleType);
    },
    setRule() {
      var rule = " ";
      for (const index in this.radio) {
        rule = rule.concat(this.radio[index]);
        if (index < this.radio.length - 1) rule = rule.concat("/");
      }
      // console.log(rule);
      this.productData.rule = rule;
      // console.log(this.productData);
    },
    //获取购物车商品条目
    getShopbagRows() {
      this.axios({
        method: "GET",
        url: "/shopcartRows",
        params: {
          appkey: this.appkey,
          tokenString: localStorage.getItem("tk__")
        }
      }).then(res => {
        console.log(res);
        if (res.data.result!= 0) this.shopbagCount = res.data.result;
      });
    },
    //根据商品pid查询收藏商品接口
    queryCollectionByPid() {
      this.axios({
        method: "GET",
        url: "/findlike",
        params: {
          appkey: this.appkey,
          pid: this.pid,
          tokenString: localStorage.getItem("tk__")
        }
      }).then(res => {
        if(res.data.code==700) this.$router.push({name:"Login"});
        // if (res.data.result.length > 0) this.like = true;
        
      });
    },
    changeLike() {
      this.axios({
        method: "POST",
        url: this.like ? "notlike" : "like",
        data: {
          appkey: this.appkey,
          pid: this.pid,
          tokenString: localStorage.getItem("tk__")
        }
      }).then(res => {
        if (res.status == 200) this.like = !this.like;
        console.log(res.data.msg);
      });
    },
    addShopbag() {
      this.axios({
        method: "POST",
        url: "/addShopcart",
        data: {
          pid: this.pid,
          count: this.count,
          rule: this.productData.rule,
          appkey: this.appkey,
          tokenString: localStorage.getItem("tk__"),
        }
      }).then(res => {
        console.log(res.data);
        if(res.data.code==3000)
        this.getShopbagRows();
      });
    },
    //购买接口
    purchase(){
      console.log("购买"+this.productData.name+this.count+"杯成功!");
    }
  }
};
</script>
<style  lang="less" scoped>
.ProductDetail {
  width: 100%;
  height: 667px;
  background: white;
}
.imgBox {
  width: 100%;
  height: 280px;
}
.product_img {
  width: 100%;
  height: 280px;
  z-index: 1;
}
.layout {
  width: 100%;
  display: flex;
}
.layout :nth-child(1) {
  flex: 1;
  font-weight: bolder;
}
.name :nth-child(1) {
  font-size: 20px;
  color: rgb(101, 98, 98);
}
.name :nth-child(2) {
  color: #0c34ba;
  font-weight: bolder;
}
.detail {
  width: 350px;
  height: 500px;
  margin: 0 auto;
  margin-top: -20px;
  background: white;
  border-radius: 10px;
  padding: 20px 10px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.enname {
  font-weight: bold;
  color: gray;
  margin-bottom: 30px;
}
.choose {
  display: flex;
  font-size: 15px;
  color: gray;
}
.option {
  margin-left: 30px;
}
.divider {
  background-color: gray;
  height: 0.5px;
  margin: 20px 0;
}
.count {
  font-size: 15px;
  font-weight: bold;
  color: gray;
}
.desc {
  font-size: 15px;
  margin-bottom: 10px;
}
.desc_content {
  color: gray;
  padding: 10px 0;
}
/deep/.van-stepper__minus {
  color: lightblue;
  border-color: lightblue;
}
/deep/.van-stepper__plus {
  color: white;
  background-color: #0c34ba;
}
/deep/ .custom-radio-group {
  // 单选框，复选框文字样式
  .van-radio__label {
    text-align: center;
    margin-left: 0;
    height: 0.7rem;
    line-height: 0.7rem;
    width: 8rem;
    font-size: 12px;
    background-color: #f6f8fa;
  }
  .van-radio {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
  }

  // 去掉原本的勾选样式
  .van-radio__icon .van-icon {
    border: 0;
    display: none;
  }
  // 选中之后的文字颜色和背景色设置
  .van-radio__icon--checked + .van-radio__label {
    color: white;
    background-color: #0c34ba;
  }
}
//  更改徽标颜色
/deep/.van-info {
  background: #0c34ba;
}
</style>